.cell {
  /* Explicitely not a padding to mimic the cell headers + we may use it when
     we will want to resize columns */
  border-left: solid 1px transparent;
  padding-right: 4px;
  padding-left: 4px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
}

.track {
  position: relative;
  display: flex;
  outline: none;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  background-color: var(--tracks-bg-even);
  align-items: center;

  &.even {
    background-color: var(--tracks-bg-odd);
  }

  &.selected {
    background-color: var(--active-item-bg);
    color: var(--active-item-color);

    & + .selected {
      border-top-color: rgba(255 255 255 / 0.2);
    }
  }

  &.isDragging {
    opacity: 0.5;
  }

  &.isOver:not(.isDragging) {
    &::after {
      pointer-events: none;
      position: absolute;
      z-index: 1;
      display: block;
      width: 100%;
      content: "";
      height: 2px;
      background-color: var(--main-color);
    }
  }

  &.isAbove::after {
    top: -1px;
  }

  &.isBelow::after {
    bottom: -1px;
  }
}

/* For simplified track rows, as they don't have a header, let's display the
 * last cell right-aligned.
 */
.simplified > :last-child {
  text-align: right;
  padding-right: 8px;
}
